<template>
    <a-collapse style="background-color: transparent;" v-model:activeKey="activeKey" :bordered="false">
        <a-collapse-panel key="1" header="渲染器">
            <setting-item-box :alone="true">
                <template #name>
                    <a-tooltip placement="top">
                        <template #title>
                            <span>所有echarts图表组件默认都将采用所选的渲染器进行渲染</span>
                        </template>
                        <span class="flex items-center">
                            全局
                            <icon icon="material-symbols:help-outline" class="ml-1" />
                        </span>
                    </a-tooltip>
                </template>
                <echarts-render-select v-model="themeSetting.renderer" />
            </setting-item-box>
            <setting-item-box :alone="true">
                <template #name>
                    <a-tooltip placement="top">
                        <template #title>
                            <span>仅当前组件采用指定渲染器渲染</span>
                        </template>
                        <span class="flex items-center">
                            当前
                            <icon icon="material-symbols:help-outline" class="ml-1" />
                        </span>
                    </a-tooltip>
                </template>
                <echarts-render-select v-model="optionData.renderer" :includeInherit="true" />
            </setting-item-box>
        </a-collapse-panel>
        <a-collapse-panel v-if="xAxis" key="2" header="X轴">
            <template #extra>
                <!-- 控制整个x轴的显示 -->
                <a-switch v-model:checked="xAxis.show" />
            </template>
            <setting-item-box name="单位">
                <setting-item name="名称">
                    <a-input v-model:value="xAxis.name" size="small" placeholder="请输入" />
                </setting-item>
                <setting-item name="颜色">
                    <color-picker class="w-full" format="rgb" v-model:pureColor="xAxis.nameTextStyle.color" />
                </setting-item>
                <setting-item name="大小">
                    <a-input-number style="width:100%" v-model:value="xAxis.nameTextStyle.fontSize" :min="12" />
                </setting-item>
                <setting-item name="偏移量">
                    <a-input-number style="width:100%" v-model:value="xAxis.nameGap" :min="5" />
                </setting-item>
            </setting-item-box>
            <setting-item-box name="标签">
                <setting-item name="展示">
                    <a-space>
                        <a-switch v-model:checked="xAxis.axisLabel.show" />
                    </a-space>
                </setting-item>
                <setting-item name="颜色">
                    <color-picker class="w-full" format="rgb" v-model:pureColor="xAxis.axisLabel.color" />
                </setting-item>
                <setting-item name="大小">
                    <a-input-number style="width:100%" v-model:value="xAxis.axisLabel.fontSize" :min="8" />
                </setting-item>
                <setting-item name="偏移量">
                    <a-input-number style="width:100%" v-model:value="xAxis.axisLabel.rotate" :min="-90" :max="90" />
                </setting-item>
            </setting-item-box>
            <setting-item-box name="轴线">
                <setting-item name="展示">
                    <a-space>
                        <a-switch v-model:checked="xAxis.axisLine.show" />
                    </a-space>
                </setting-item>
                <setting-item name="颜色">
                    <color-picker class="w-full" format="rgb" v-model:pureColor="xAxis.axisLine.lineStyle.color" />
                </setting-item>
                <setting-item name="粗细">
                    <a-input-number style="width:100%" v-model:value="xAxis.axisLine.lineStyle.width" :min="1" />
                </setting-item>
                <setting-item name="位置">
                    <a-select v-model:value="xAxis.position" :options="axisConfig.xposition" />
                </setting-item>
                <setting-item name="对齐零">
                    <a-space>
                        <a-switch v-model:checked="xAxis.axisLine.onZero" />
                    </a-space>
                </setting-item>
                <setting-item name="反向">
                    <a-space>
                        <a-switch v-model:checked="xAxis.inverse" />
                    </a-space>
                </setting-item>
            </setting-item-box>
            <setting-item-box name="刻度">
                <setting-item name="展示">
                    <a-space>
                        <a-switch v-model:checked="xAxis.axisTick.show" />
                    </a-space>
                </setting-item>
                <setting-item name="长度">
                    <a-input-number style="width:100%" v-model:value="xAxis.axisTick.length" :min="1" />
                </setting-item>
            </setting-item-box>
            <setting-item-box name="分割线">
                <setting-item name="展示">
                    <a-space>
                        <a-switch v-model:checked="xAxis.splitLine.show" />
                    </a-space>
                </setting-item>
                <setting-item name="颜色">
                    <color-picker class="w-full" format="rgb" v-model:pureColor="xAxis.splitLine.lineStyle.color" />
                </setting-item>
                <setting-item name="粗细">
                    <a-input-number style="width:100%" v-model:value="xAxis.splitLine.lineStyle.width" :min="1" />
                </setting-item>
                <setting-item name="类型">
                    <a-select v-model:value="xAxis.splitLine.lineStyle.type"
                        :options="axisConfig.splitLint.lineStyle.type" />
                </setting-item>
            </setting-item-box>
        </a-collapse-panel>
        <a-collapse-panel v-if="yAxis" key="3" header="Y轴">
            <template #extra>
                <!-- 控制x刻度线显示 -->
                <a-switch v-model:checked="yAxis.show" />
            </template>
        </a-collapse-panel>
        <a-collapse-panel v-if="legend" key="4" header="图例">
            <template #extra>
                <!-- 控制x刻度线显示 -->
                <a-switch v-model:checked="legend.show" />
            </template>
            <setting-item-box name="图例文字">
                <setting-item name="颜色">
                    <color-picker class="w-full" format="rgb" v-model:pureColor="legend.textStyle.color" />
                </setting-item>
                <setting-item name="大小">
                    <a-input-number style="width:100%" v-model:value="legend.textStyle.fontSize" :min="1" />
                </setting-item>
            </setting-item-box>
            <setting-item-box name="图例位置">
                <setting-item name="x轴">
                    <a-select v-model:value="legend.x" :options="legendConfig.lengendX" />
                </setting-item>
                <setting-item name="y轴">
                    <a-select v-model:value="legend.y" :options="legendConfig.lengendY" />
                </setting-item>
            </setting-item-box>
            <setting-item-box name="图例信息">
                <setting-item name="方向">
                    <a-select v-model:value="legend.orient" :options="legendConfig.orient" />
                </setting-item>
                <setting-item name="形状">
                    <a-select v-model:value="legend.icon" :options="legendConfig.shape" />
                </setting-item>
            </setting-item-box>
            <setting-item-box name="图例大小">
                <setting-item name="宽">
                    <a-input-number style="width:100%" v-model:value="legend.itemWidth" :min="1" />
                </setting-item>
                <setting-item name="高">
                    <a-input-number style="width:100%" v-model:value="legend.itemHeight" :min="1" />
                </setting-item>
            </setting-item-box>
        </a-collapse-panel>
    </a-collapse>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import settingItemBox from '@/components/chart/settingItemBox/index.vue'
import Icon from '@/components/Iconify/index.vue'
import echartsRenderSelect from './components/echartsRenderSelect.vue';
import type { GlobalThemeJsonType } from '@/views/dataview/setting/chartTheme';
import { useDataViewStore } from '@/stores/dataview';
import settingItem from '../settingItemBox/settingItem.vue';
import { ColorPicker } from "vue3-colorpicker";
import { axisConfig } from '@/views/dataview/packages/chartConfiguartion/echarts/axis';
import { legendConfig } from '@/views/dataview/packages/chartConfiguartion/echarts/legend';

const props = withDefaults(defineProps<{
    optionData: GlobalThemeJsonType,
    inChart?: Boolean
}>(), {})
const dataviewStore = useDataViewStore()
const activeKey = ref(['1']);

const themeSetting = computed(() => {
    return dataviewStore.getEditCanvasConfig.chartThemeSetting
})

const xAxis = computed(() => props.optionData.xAxis)
const yAxis = computed(() => props.optionData.yAxis)
const legend = computed(() => props.optionData.legend)
</script>

<style lang='scss' scoped>
:deep(.vc-color-wrap) {
    width: 100%;
    border-radius: 5px;
}
</style>